<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
  <title>记忆课堂</title>
  <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/stylesheets/base.css">
  <style>
    .body {
      background: #fff;
    }
    .post-base-info {
      border-bottom: 2px dashed #eee;
    }
    .comment-textarea {
      width: 100%;
      min-height: 80px;
    }
    .post-base-info {
      padding: 20px 0;
    }
    .comments-box {
      padding: 20px 0;
    }
    .comments-item , .sub-comments-item{
      padding: 10px 0;
      border-bottom: 1px solid #eee;
    }
    .sub-comments-box {
      
      padding: 10px 24px;
      background: #f8f8f8;
    }
    .handler-content .btn {
      margin-right: 10px;
    }
    article {
      padding-left: 4px;
    }
  </style>
</head>
<body>
  
  <div id="app">
    <div class="bar clearfix">
      <div class="container">
        <div class="pull-left">
          <a href="javascript:void(0)" @click="back" >
            <span class="back">Back</span>
          </a>
        </div>
        <span class="bar-en">memory class</span>
        <div class="user-box pull-right">
          <a :href="'/userCenterPage?id=' + loginer._id" v-if="loginer.name">
            <span class="user-name">{{loginer.name.slice(0,2)}}</span>
          </a>
          <a href="/loginPage" v-if="!loginer.name">
            <span class="my-btn">登陆</span>
          </a>
        </div>
      </div>
    </div>
    <div class="body clearfix">
      <div class="col-md-8 col-md-offset-2 col-xs-10 col-xs-offset-1 " >
        <section class="post-info">
          <div class="post-base-info">
            <h4 class="clearfix"> {{post.title}} 
              <button class="btn btn-xs btn-default pull-right" @click="collectPost">
                <span class=" glyphicon glyphicon-star"></span> 收藏该贴
              </button>
            </h4>
            <div class="post-detail-info">
              <p>
                <span class="author user-name bg-orange mr-15">
                  {{post.handler && post.handler.name.slice(0, 2)}}
                </span>
                <span class="color-gray">
                  {{post.createdAt | date}}
                </span>
              </p>
              <article>
                {{post.content}}
              </article>
            
            </div>
          </div>
          <div class="comments-box" v-if="post.comments">
            <div class="comments-item" v-for="(item, index) in post.comments">
              <p class="author-box">
                <span class="user-name bg-blue mr-15" :class="{'bg-orange': item.handler.name == post.handler.name}">
                  {{item.handler.name.slice(0, 2)}}
                </span>
                <span class="color-gray">
                  {{item.createdAt | date}}
                </span>
              </p>
              <article >
                <p class="clearfix">
                  {{item.content}}
                  <div class="handler-content clearfix">

                    <button @click="applyUser(item._id, item.handler)" 
                      class="btn btn-default btn-xs pull-left">
                      <span class=" glyphicon glyphicon-comment"></span> 回复
                    </button>
                  </div>
                  
                </p>
                <div class="sub-comments-box" v-if="item.comments.length" >
                  <div class="sub-comments-item" v-for="subItem in item.comments" >
                    <p class="author-box ">
                      <span class="user-name bg-blue mr-15">
                        {{subItem.handler.name.slice(0, 2)}}
                      </span>
                      <span class="color-gray">
                        {{subItem.createdAt | date}}
                      </span>
                    </p>
                    <article class="clearfix">
                      {{subItem.content}}
                      <div class="handler-content clearfix">

                        <button @click="applyUser(item._id, subItem.handler)" 
                          class="btn btn-default btn-xs pull-left">
                          <span class=" glyphicon glyphicon-comment"></span> 回复
                        </button>
                      </div>
                    </article>
                  </div>
                </div>
                
              </article>
            </div>
            <!-- <comments-item-component v-for="(item, index) in post.comments" :item="item">
            </comments-item-component> -->
          </div>
          <div class="publish-comment">
            <publish-comment-component :targeter="post && post.handler" ref="publishBox" v-on:update-post="updatePost" ></publish-comment-component>
          </div>
        </section>
      </div>
    </div>
    <footer>
      
    </footer>
    
  </div>

 <!--  <template id="comments-item">
    <div class="comments-item">
      <div class="author-box">
        {{item.handler.name}}
        <span v-if="item.targater.id">
          @ {{item.targeter.name}}
        </span>
      </div>
      <div class="comment-box">
        {{item.content}}
      </div>
    </div>
  </template> -->

  <template id="publish-comment">
    <div>
      <h5 class="color-orange"> 发表回复</h5>
      <div class="publish-comment-item">
        <textarea ref="commentTextarea" v-model="inputComments" class="comment-textarea" placeholder="请输入回复内容"></textarea>
      </div>
      <div class="publish-comment-item clearfix">
        <button @click="publishComment" class="btn btn-primary pull-right">提交评论</button>
      </div>
    </div>
  </template>

  
  <script type="text/javascript" src="/lib/vue/vue.min.js"></script>
  <script src="/lib/vue/vue-resource.min.js"></script>
  <script src="/scripts/assets/filter.js"></script>
  <script src="/scripts/assets/util.js"></script>
  <script>
    Vue.use(VueResource)

    // var commentsItemComponent = Vue.extend({
    //   template: '#comments-item',
    //   data: function () {
    //     return {

    //     }
    //   },
    //   props: ['item']
    // })

    var publishCommentComponent = Vue.extend({
      template: '#publish-comment',
      data: function () {
        return {
          inputComments: '',
          handler: {
            name: '',
            id: ''
          },
          targeter: {
            name: '',
            id: ''
          },
          commentId: ''
        }
      },
      mounted: function () {
        
      },
      methods: {
        applyUser: function (commentId, targeter) {
          this.commentId = commentId
          this.targeter = targeter
          var textareaElem = this.$refs.commentTextarea
          this.inputComments = '@ ' + targeter.name + '：' 
          textareaElem.focus()

        },
        publishComment: function () {
          var loginer = this.$parent.loginer
          var targeter = this.targeter
          var commentId = this.commentId
          if (!loginer._id) {
            return alert('请先登录')
          }
          if (!this.inputComments.length) {
            return alert('请输入内容')
          }

          this.$http.post('/post/comment/id/' + $$.getQuery('id') + '?commentId=' + commentId , {
            handler: {
              name: loginer.name,
              id: loginer._id
            },
            targeter: targeter,
            content: this.inputComments
          }).then(function (res) {
            if (res.data.code == 100) {
              this.inputComments = ''
              this.commentId = ''
              this.targeter = {
                name: '',
                id: ''
              }
              this.$emit('update-post', res.data.data.post)
            } else {
              alert(res.data.msg)
            }
          })

        }
      },
      props: ['targeter']

    })


    new Vue({
      el: '#app',
      data: {
        post: {},
        loginer: {
          name: '',
          id: ''
        }
      },
      mounted: function () {
        //  判断是否登录
        var user = $$.localData('memoryClassUser')
        if (user) {
          this.loginer = user        
        }

        this.$http.get('/post/id/' + Util.getQuery('id')).then(function(res) {
          if (res.data.code == 100) {
            this.post = res.data.data.post
          } else {
            alert(res.data.msg)
          }
        })
      },
      methods: {
        back: function () {
          history.back()
        },
        updatePost: function(post) {
          this.post = post
        },
        applyUser: function (commentId, targeter) {
          var publishBox = this.$refs.publishBox
          publishBox.applyUser(commentId, targeter)
        },
        collectPost: function () {
          if (!this.userInfo.id) {
            return alert('请先登录')
          }
          
        }
      },
      components: {
        // 'comments-item-component': commentsItemComponent,
        'publish-comment-component': publishCommentComponent
      }
    })

  </script>
</body>
</html>